/*
 * @Description: 聊天室
 * @Author: Yong
 * @Date: 2021-10-09 22:44:40
 * @LastEditTime: 2021-10-10 22:34:18
 */
import React from 'react'
import { RouteComponentProps } from 'react-router-dom'
import socket from 'socket.io-client'
import styles from './index.module.scss'
import { Grid, Input, Button } from 'antd-mobile'
import H from 'history'

interface Location extends H.Location {
    query: { [key: string]: string }
    state: { [key: string]: UserInfo }
}

interface IProps extends RouteComponentProps {
    location: Location
}

interface UserInfo {
    ID?: string
    U_Avatar?: string
    U_LoginID?: string
    U_nickName?: string
}

interface IState {
    userInfo?: UserInfo,
    friendInfo?: UserInfo,
    inputVal?: string
}

const userPhoto = require('@assets/images/defaultPhoto.jpg')

export default class ChatRoom extends React.Component<IProps, IState> {

    ChatRoomSocket: any = null

    state: IState = {
        userInfo: JSON.parse(window.localStorage.getItem('userInfo')) || {},
        friendInfo: {
            ID: 'asd',
            U_Avatar: userPhoto,
            U_LoginID: '小红',
            U_nickName: '小红'
        },
        inputVal: '',
    }

    async componentDidMount () {
        const friendInfo = JSON.parse(window.localStorage.getItem('friendInfo')) || this.props.location.state.friendInfo
        this.setState({
            friendInfo: friendInfo
        }, () => {
            window.localStorage.setItem('friendInfo', JSON.stringify(friendInfo))
            console.log(this.state.friendInfo)
            this.initSocket()
        })
    }

    // 组件销毁前 - 断开socket连接
    async componentWillUnmount () {
        // 断开连接
        this.ChatRoomSocket.disconnect()
        console.log('ChatRoomSocket连接断开')
        // 清空friendInfo缓存
        window.localStorage.removeItem('friendInfo')
    }

    // 初始化 socket连接
    initSocket () {
        this.ChatRoomSocket = socket('ws://localhost:7001/chatRoom', { path: '/testPath',
            query: {
                userID: this.state.userInfo.ID,
                friendID: this.state.friendInfo.ID
            }
        })

        // 监听socket连接
        this.ChatRoomSocket.on('connection', () => {
            console.log('服务端连接成功')
        })

        // 接收服务端返回的数据
        this.ChatRoomSocket.on('msg', (msg: string, fromId: string) => { this.receiveMsg(msg, fromId) })
    }

    // 监听输入框输入
    onChangeVal = (val:string) => {
        this.setState({
            inputVal: val
        })
    }

    // 发送消息
    sendMsg = () => {
        const { inputVal, userInfo, friendInfo } = this.state
        const msg = {
            cont: inputVal,
            type: 0,
        }
        this.ChatRoomSocket.emit('msg', msg, userInfo.ID, friendInfo.ID)
    }

    // 接收服务端返回的消息
    receiveMsg = (msg: string, fromId: string) => {
        console.log(`${fromId}发送的消息：${msg}`)
    }

    render () {
        const { friendInfo, userInfo, inputVal } = this.state

        return (
            <div className={styles.chatRoom}>
                {/* 顶部 */}
                <div className={styles.header}>
                    <Grid columns={12} gap={8}>
                        <Grid.Item span={2}>
                            <div className={styles['grid-demo-item-block']}>A</div>
                        </Grid.Item>
                        <Grid.Item span={8}>
                            <div className={styles['grid-demo-item-block']}>{ friendInfo.U_LoginID }</div>
                        </Grid.Item>
                        <Grid.Item span={2}>
                            <div className={styles['grid-demo-item-block']}>C</div>
                        </Grid.Item>
                    </Grid>
                </div>
                {/* 内容区域 */}
                <div className={styles.main}>
                    内容区域
                </div>
                {/* 底部输入框区域 */}
                <div className={styles.bottom}>
                    <div className={ styles.inputBox }>
                        <Input placeholder='请输入' value={inputVal} onChange={(e) => { this.onChangeVal(e) }} />
                        <Button onClick={ this.sendMsg } >发送</Button>
                    </div>
                </div>
            </div>
        )
    }
}